<template>
  <div
    class="uni-scroll app-container"
    style="height: calc(100vh - 110px);"
  >
    <el-card shadow="never">
      <div style="display: flex">
        <el-image :src="device.iconUrl" style="width: 50px;height: 50px"/>
        <div style="flex-grow: 1;margin-left: 5px">
          <div style="font-size:0.3em;font-weight: lighter;line-height: 15px">
            <span style="float: right;color: #909399;">
              <div style="display: flex">
                <div style="text-align: center">
                  <div>{{ $t('status') }}</div>
                  <div
                    style="font-size: 20px;color: #000;margin-top: 13px"
                  >{{ formatDeviceStatus(device.status) }}</div>
                </div>
                <div style="text-align: center;margin-left: 20px">
                  <div>{{ $t('signal') }}</div>
                  <div
                    style="font-size: 20px;color: #000;margin-top: 13px"
                  >{{ -(113 - 2 * device.netSignal) + 'dBn' }}</div>
                </div>
                <div style="text-align: center;margin-left: 20px">
                  <div>{{ $t('surplus') }}</div>
                  <div style="font-size: 20px;color: #000;margin-top: 13px">{{ device.surplus }}%</div>
                </div>
              </div>
            </span>
          </div>
          <div class="primary-color;" style="font-size: 20px;line-height: 50px">{{ deviceCore }}</div>
        </div>
      </div>
    </el-card>

    <el-container style="margin-top: 13px;height: calc(100vh - 220px)" class="uni-scroll">
      <el-aside width="150px" style="padding: 0px;background: #FFF">
        <el-menu
          style="height: 100%"
          default-active="2"
          @open="handleOpen"
          @close="handleClose"
          @select="handleSelect"
        >

          <el-menu-item v-if="devModel" index="sensor">
            <i class="el-icon-s-data"/>
            <span slot="title">{{ $t('sensor') }}</span>
          </el-menu-item>
          <el-menu-item v-if="devModel" index="param">
            <i class="el-icon-menu"/>
            <span slot="title">{{ $t('param') }}</span>
          </el-menu-item>
          <el-menu-item v-if="devModel" index="setting">
            <i class="el-icon-setting"/>
            <span slot="title">{{ $t('setting') }}</span>
          </el-menu-item>
          <el-menu-item v-if="devModel" index="explain">
            <i class="el-icon-odometer"/>
            <span slot="title">{{ $t('explain') }}</span>
          </el-menu-item>
          <el-menu-item index="deviceLinkage">
            <i class="el-icon-s-operation"/>
            <span slot="title">{{ $t('linkage') }}</span>
          </el-menu-item>
          <el-menu-item index="status">
            <i class="el-icon-sort"/>
            <span slot="title">{{ $t('status') }}</span>
          </el-menu-item>
          <el-menu-item index="warn">
            <i class="el-icon-warning"/>
            <span slot="title">{{ $t('warn') }}</span>
          </el-menu-item>
          <el-menu-item index="local" :disabled="netModel === 'local'">
            <i class="el-icon-location"/>
            <span slot="title">{{ $t('position') + $t('history') }}</span>
          </el-menu-item>
          <el-menu-item index="settingHistory">
            <i class="el-icon-thumb"/>
            <span slot="title">{{ $t('setting') + $t('history') }}</span>
          </el-menu-item>
          <el-menu-item v-if="devModel" index="hardwareConfig">
            <i class="el-icon-cpu"/>
            <span slot="title">{{ $t('hardware') }}{{ $t('config') }}</span>
          </el-menu-item>
          <el-menu-item
            v-if="devModel && showSecret"
            index="delete"
            :disabled="device.createdUserId !== userId"
          >
            <i class="el-icon-delete"/>
            <span slot="title">{{ $t('delete') }}</span>
          </el-menu-item>
          <el-menu-item v-if="device.deviceBelongId" index="unbind">
            <i class="el-icon-link"/>
            <span slot="title">{{ $t('unbind') }}</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <el-tabs>
          <el-tab-pane :label=" $t('base')+$t('info')">
            <div v-if="weather" class="bg-primary-color flex justify-start rounded-md mb-2 p-2">
              <el-image
                :src="weather.weatherImage"
                style="width: 50px;height: 50px"
              />
              <div class="text-white text-xs ml-2">
                <div>{{ weather.weather }} {{ weather.temperature }}°C</div>
                <div>{{ weather.lowTemperature }}°C ~ {{ weather.highTemperature }}°C</div>
                <span><span>{{ weather.winDirection }}</span> <span>{{
                    weather.winGrade
                  }}</span> <span>{{ weather.winSpeed }}</span> <span>{{ $t('air') + $t('quality') }}:{{
                    weather.airQuality
                  }}</span></span>
              </div>
            </div>
            <el-card>
              <div class="demo-table-expand">
                <el-form label-position="left" inline>
                  <el-form-item v-if="showSecret" :label="$t('deviceId')">
                    <span>{{ device.deviceKey }}</span>
                  </el-form-item>
                  <el-form-item v-if="showSecret" :label="$t('secret')">
                    <span>{{ device.deviceSecret }}</span>
                  </el-form-item>
                  <el-form-item v-if="devModel" :label="$t('company')+$t('name')">
                    <span>{{ device.companyName }}</span>
                  </el-form-item>
                  <el-form-item :label="$t('createdDate')">
                    <span>{{ device.createdDate }}</span>
                  </el-form-item>
                  <el-form-item :label="$t('offline')+$t('count')">
                    <span>{{ device.offLineNum }}</span>
                  </el-form-item>
                  <el-form-item :label="$t('last')+$t('OFFLINE')+$t('time')">
                    <span>{{ device.lastOffLineTimer }}</span>
                  </el-form-item>
                  <el-form-item :label="$t('last')+$t('ONLINE')+$t('time')">
                    <span>{{ device.lastOnLineTimer }}</span>
                  </el-form-item>
                  <el-form-item :label="$t('ip')">
                    <span>{{ device.clientIp }}</span>
                  </el-form-item>
                  <el-form-item :label="$t('last')+$t('send')+$t('time')">
                    <span>{{ device.lastSendTime }}</span>
                  </el-form-item>
                  <el-form-item :label="$t('pingTime')">
                    <span>{{ device.pingTime }}</span>
                  </el-form-item>
                  <el-form-item :label="$t('location')+$t('type')">
                    <span>{{ formatLocationType(device.locationType) }}</span>
                  </el-form-item>
                  <el-form-item :label="$t('address')">
                    <span v-if="editAddress">
                      <el-input v-model="device.address">
                        <el-button slot="append" icon="el-icon-check" @click="btnSubmit()"/>
                      </el-input>
                    </span>
                    <span v-else @click="editAddress=true">{{ device.address }}</span>
                  </el-form-item>
                </el-form>
              </div>
            </el-card>
            <el-row :gutter="20">
              <el-col :span="6">
                <el-card shadow="hover" style="height:200px;text-align: center;margin-top: 13px">
                  <div>
                    <span>{{ $t('setting') }}</span>
                  </div>
                  <el-button
                    style="margin-top: 100px"
                    type="primary"
                    @click="showSetting = true"
                    v-text="$t('confirm')"
                  />
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card shadow="hover" style="height:200px;text-align: center;margin-top: 13px">
                  <div>
                    <span>{{ $t('sensor') }}</span>
                  </div>
                  <el-button
                    style="margin-top: 100px"
                    type="primary"
                    @click="drawer = true"
                    v-text="$t('confirm')"
                  />
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card shadow="hover" style="height:200px;text-align: center;margin-top: 13px">
                  <div>
                    <span>{{ $t('qrCode') }}</span>
                  </div>
                  <el-button
                    style="margin-top: 100px"
                    type="primary"
                    @click="btnWecharCode"
                    v-text="$t('confirm')"
                  />
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card shadow="hover" style="height:200px;text-align: center;margin-top: 13px">
                  <div>
                    <span>{{ $t('parent') + $t('device') }}</span>
                  </div>
                  <el-button
                    style="margin-top: 100px"
                    type="primary"
                    @click="listDeviceBindParent()"
                    v-text="$t('confirm')"
                  />
                </el-card>
              </el-col>
              <el-col v-if="devModel" :span="6">
                <el-card shadow="hover" style="height:200px;text-align: center;margin-top: 13px">
                  <div>
                    <span>{{ $t('secret') }}</span>
                  </div>
                  <el-button
                    style="margin-top: 100px"
                    type="primary"
                    @click="getDeviceSecret"
                    v-text="$t('get')"
                  />
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card shadow="hover" style="height:200px;text-align: center;margin-top: 13px">
                  <div>
                    <span>{{ $t('map') }}</span>
                  </div>
                  <el-button
                    type="primary"
                    style="margin-top: 100px"
                    @click="showMap"
                    v-text="$t('set')"
                  />
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card shadow="hover" style="height:200px;text-align: center;margin-top: 13px">
                  <div>
                    <span>{{ $t('locationFence') }}</span>
                  </div>
                  <el-button
                    :disabled="netModel === 'local'"
                    type="primary"
                    style="margin-top: 100px"
                    @click="showMap2"
                    v-text="$t('set')"
                  />
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card shadow="hover" style="height:200px;text-align: center;margin-top: 13px">
                  <div>
                    <span>{{ $t('status') }}</span>
                  </div>
                  <el-button
                    type="primary"
                    style="margin-top: 100px"
                    @click="renewStatus"
                    v-text="$t('refresh')"
                  />
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card shadow="hover" style="height:200px;text-align: center;margin-top: 13px">
                  <div>
                    <el-badge :value="device.warnNum">
                      <span>{{ $t('warn') }}</span>
                    </el-badge>
                  </div>
                  <el-button
                    type="primary"
                    style="margin-top: 100px"
                    @click="cleanWarn"
                    v-text="$t('clean')"
                  />
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card shadow="hover" style="height:200px;text-align: center;margin-top: 13px">
                  <div>
                    <span>{{ $t('server') + $t('status') }}</span>
                  </div>
                  <el-switch
                    v-model="device.enable"
                    style="margin-top: 100px"
                    @change="btnThing"
                  />
                </el-card>
              </el-col>

              <el-col :span="6">
                <el-card shadow="hover" style="height:200px;text-align: center;margin-top: 13px">
                  <div>
                    <span>{{ $t('lock') + $t('local') }}</span>
                  </div>
                  <el-switch
                    v-model="device.lockLocal"
                    style="margin-top: 100px"
                    @change="btnLockLoc"
                  />
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card shadow="hover" style="height:200px;text-align: center;margin-top: 13px">
                  <div>
                    <span>{{ $t('push') }}</span>
                  </div>
                  <el-switch
                    v-model="device.openPush"
                    style="margin-top: 100px"
                    @change="btnOpenPush"
                  />
                </el-card>
              </el-col>
              <el-col v-if="devModel" :span="6">
                <el-card shadow="hover" style="height:200px;text-align: center;margin-top: 13px">
                  <div>
                    <span>{{ $t('open') + $t('bind') }}</span>
                  </div>
                  <el-switch
                    v-model="device.devicePublic"
                    style="margin-top: 100px"
                    @change="btnDevicePublic"
                  />
                </el-card>
              </el-col>
              <el-col v-if="enableServerLinkage || device.canDeviceLinkage" :span="6">
                <el-card shadow="hover" style="height:200px;text-align: center;margin-top: 13px">
                  <div>
                    <span>{{ $t('linkage') }}</span>
                  </div>
                  <el-switch
                    v-model="device.canDeviceLinkage"
                    style="margin-top: 100px"
                    @change="btnCanLinkage"
                  />
                </el-card>
              </el-col>
              <el-col v-if="device.deviceBelongId" :span="6">
                <el-card shadow="hover" style="height:200px;text-align: center;margin-top: 13px">
                  <div>
                    <span>{{ $t('user') + $t('push') }}</span>
                  </div>
                  <el-switch
                    v-model="device.canNotice"
                    style="margin-top: 100px"
                    @change="btnOpenPush"
                  />
                </el-card>
              </el-col>
              <el-col v-if="device.deviceBelongId" :span="6">
                <el-card shadow="hover" style="height:200px;text-align: center;margin-top: 13px">
                  <div>
                    <span>{{ $t('focus') }}</span>
                  </div>
                  <el-switch
                    v-model="device.follow"
                    style="margin-top: 100px"
                    @change="btnFollow"
                  />
                </el-card>
              </el-col>
              <el-col v-if="device.deviceBelongId" :span="6">
                <el-card shadow="hover" style="height:200px;text-align: center;margin-top: 13px">
                  <div>
                    <span>{{ $t('notice') + $t('status') }}</span>
                  </div>
                  <el-switch
                    v-model="device.noticeStatus"
                    style="margin-top: 100px"
                    @change="btnNoticeStatus"
                  />
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card shadow="hover" style="height:200px;text-align: center;margin-top: 13px">
                  <div>
                    <span>{{ $t('download') }}</span>
                  </div>
                  <el-button
                    style="margin-top: 100px"
                    type="primary"
                    @click="download"
                    v-text="$t('confirm')"
                  />
                </el-card>
              </el-col>
              <el-col :span="12">
                <el-card shadow="hover" style="height:200px;text-align: center;margin-top: 13px">
                  <div>
                    <span>{{ $t('upload') + $t('config') }}</span>
                  </div>
                  <input
                    style="margin-top: 100px"
                    type="file"
                    @change="jsReadFiles"
                  >
                </el-card>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane :label="$t('device')+$t('manage')">
            <el-form
              label-width="130px"
              label-position="right"
            >
              <el-form-item :label="$t('icon')">
                <el-image
                  style="width: 40px;height: 40px;"
                  :src="device.iconUrl"
                  @click="choseIcon"
                />
                <div v-show="isIconOpen">
                  <el-image
                    v-for="(item,index) in iconList"
                    :key="index"
                    style="margin: 5px;cursor: pointer;width: 40px;height: 40px"
                    :src="item.url"
                    @click="changeIco(item.url,200145308)"
                  />
                </div>
              </el-form-item>
              <el-form-item :label="$t('device')+$t('name')">
                <el-input
                  v-model="device.deviceName"
                  style="width: 80%"
                />
              </el-form-item>
              <el-form-item :label="$t('product')">
                <el-select
                  v-model="device.productId"
                  style="width: 80%"
                  :disabled="!devModel"
                  @change="getSeriesList(true)"
                >
                  <el-option
                    v-for="item in productList"
                    :key="item.productId"
                    :label="item.name"
                    :value="item.productId"
                  />
                </el-select>
              </el-form-item>
              <el-form-item :label="$t('series')">
                <el-select
                  v-model="device.seriesId"
                  style="width: 80%"
                  :disabled="!devModel"
                >
                  <el-option
                    v-for="item in seriesList"
                    :key="item.seriesId"
                    :label="item.name"
                    :value="item.seriesId"
                  />
                </el-select>
              </el-form-item>
              <el-form-item
                v-if="devModel && device.deviceBelongId"
                :label="$t('dept')"
              >
                <el-cascader
                  v-model="device.deptId"
                  filterable
                  :disabled="!devModel"
                  :options="treeDeptData"
                  :props="{value:'id',label:'name',checkStrictly:true,emitPath:false}"
                />
              </el-form-item>
              <el-form-item :label="$t('cardNumber')">
                <el-input
                  v-model="device.phoneNumber"
                  :placeholder="$t('cardNumber')"
                  style="width: 80%"
                />
                <el-button type="primary" icon="el-icon-printer" @click="showPhoneInfo"/>
              </el-form-item>
              <el-form-item v-if="device.deviceBelongId" :label="$t('group')">
                <el-select
                  v-model="device.groupId"
                  style="width: 80%"
                >
                  <el-option
                    v-for="item in groupList"
                    :key="item.groupId"
                    :label="item.name"
                    :value="item.groupId"
                  />
                </el-select>
              </el-form-item>
              <el-form-item :label="$t('server')">
                <el-select
                  v-model="device.serverId"
                  style="width: 80%"
                  disabled
                >
                  <el-option
                    v-for="item in serverList"
                    :key="item.serverId"
                    :label="item.name"
                    :value="item.serverId"
                  />
                </el-select>
              </el-form-item>
              <el-form-item :label="$t('keyName')">
                <el-select
                  v-model="device.serverId"
                  style="width: 80%"
                  disabled
                >
                  <el-option
                    v-for="item in serverList"
                    :key="item.serverId"
                    :label="item.serverMessage"
                    :value="item.serverId"
                  />
                </el-select>
              </el-form-item>
              <el-form-item :label="$t('protocol')">
                <el-autocomplete
                  v-model="device.protocol"
                  :disabled="!devModel"
                  class="inline-input"
                  :fetch-suggestions="queryProtocolSearch"
                />
              </el-form-item>
              <el-form-item :label="$t('remark')">
                <el-input
                  v-model="device.remark"
                  style="width: 80%"
                />
              </el-form-item>
              <el-form-item :label="$t('hardware')+$t('version')">
                <el-input
                  v-model="device.hardVersion"
                  style="width: 80%"
                  :disabled="!devModel"
                />
              </el-form-item>
              <el-form-item :label="$t('software')+$t('version')">
                <el-input
                  v-model="device.softVersion"
                  style="width: 80%"
                  :disabled="!devModel"
                />
              </el-form-item>
              <el-form-item :label="$t('send')+$t('interval')+'(s)'">
                <el-slider
                  v-model="device.sendInterval"
                  style="width: 80%"
                  show-input
                  show-stops
                  :max="120"
                  :disabled="!devModel"
                />
              </el-form-item>
              <el-form-item :label="$t('send')+$t('outTime')+'(s)'">
                <el-slider
                  v-model="device.sendOutTime"
                  style="width: 80%"
                  show-input
                  show-stops
                  :max="30"
                  :disabled="!devModel"
                />
              </el-form-item>
              <el-form-item :label="$t('send')+$t('retryNum')">
                <el-slider
                  v-model="device.sendRetryNum"
                  style="width: 80%"
                  show-input
                  show-stops
                  :max="5"
                  :disabled="!devModel"
                />
              </el-form-item>
              <el-form-item :label="$t('lat')">
                <el-input
                  v-model="device.lat"
                  style="width: 80%"
                />
              </el-form-item>
              <el-form-item :label="$t('lng')">
                <el-input
                  v-model="device.lng"
                  style="width: 80%"
                />
              </el-form-item>
              <!--              <el-form-item :label="$t('map')">-->
              <!--                <div-->
              <!--                  id="device_map"-->
              <!--                  style="height: 300px;width: 80%;"-->
              <!--                />-->
              <!--                &lt;!&ndash;  搜索按钮 &ndash;&gt;-->
              <!--                &lt;!&ndash;                <div v-if="netModel !== 'local'">&ndash;&gt;-->
              <!--                &lt;!&ndash;                  <div v-if="!enableSearch" class="map_search" @click="enableSearch = true">&ndash;&gt;-->
              <!--                &lt;!&ndash;                    <span class="map_search_span el-icon-search" />&ndash;&gt;-->
              <!--                &lt;!&ndash;                  </div>&ndash;&gt;-->
              <!--                &lt;!&ndash;                  &lt;!&ndash; 搜索框&ndash;&gt;&ndash;&gt;-->
              <!--                &lt;!&ndash;                  <div v-else class="map_search_index">&ndash;&gt;-->
              <!--                &lt;!&ndash;                    <div class="map_search_frame">&ndash;&gt;-->
              <!--                &lt;!&ndash;                      <input&ndash;&gt;-->
              <!--                &lt;!&ndash;                        v-model="keyword"&ndash;&gt;-->
              <!--                &lt;!&ndash;                        type="text"&ndash;&gt;-->
              <!--                &lt;!&ndash;                        class="map_search_frame_input"&ndash;&gt;-->
              <!--                &lt;!&ndash;                        :placeholder="$t('city')"&ndash;&gt;-->
              <!--                &lt;!&ndash;                      >&ndash;&gt;-->
              <!--                &lt;!&ndash;                      <i class="map_search_frame_btn el-icon-search" @click="searchKeyword" />&ndash;&gt;-->
              <!--                &lt;!&ndash;                    </div>&ndash;&gt;-->
              <!--                &lt;!&ndash;                    <div&ndash;&gt;-->
              <!--                &lt;!&ndash;                      v-if="searchPointList.length > 0"&ndash;&gt;-->
              <!--                &lt;!&ndash;                      style="background: #FFF;height: 200px"&ndash;&gt;-->
              <!--                &lt;!&ndash;                      class="uni-scroll"&ndash;&gt;-->
              <!--                &lt;!&ndash;                    >&ndash;&gt;-->
              <!--                &lt;!&ndash;                      <div v-for="(item,index) in searchPointList" :key="index">&ndash;&gt;-->
              <!--                &lt;!&ndash;                        <div style="margin: 13px" @click="pointClick(item)">&ndash;&gt;-->
              <!--                &lt;!&ndash;                          {{ item.name }}&ndash;&gt;-->
              <!--                &lt;!&ndash;                        </div>&ndash;&gt;-->
              <!--                &lt;!&ndash;                      </div>&ndash;&gt;-->
              <!--                &lt;!&ndash;                    </div>&ndash;&gt;-->
              <!--                &lt;!&ndash;                  </div>&ndash;&gt;-->
              <!--                &lt;!&ndash;                </div>&ndash;&gt;-->
              <!--              </el-form-item>-->
              <el-form-item>
                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  @click="btnSubmit"
                  v-text="$t('save')"
                />
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane v-if="devModel || this.device.canManage" :label="$t('permission')" :lazy="true">
            <belong-manage :device-core="device.deviceCore" style="width: 100%;"/>
          </el-tab-pane>
          <el-tab-pane :label="$t('camera')" :lazy="true">
            <el-button
              style="margin: 5px"
              type="primary"
              @click="cameraManage"
            >
              {{ $t('my') + $t('camera') }}
            </el-button>
            <camera-manage :device-core="device.deviceCore"/>
          </el-tab-pane>
          <el-tab-pane :label="$t('log')" :lazy="true">
            <device-log :device="device"/>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>

    <el-dialog
      :title="$t('cardNumber')"
      :visible.sync="dialogPhoneFormVisible"
    >
      <el-form
        label-width="180px"
      >
        <el-form-item :label="$t('msisdn')">
          <el-input :value="phoneForm.msisdn" :disabled="true"/>
        </el-form-item>
        <el-form-item :label="$t('iccid')">
          <el-input :value="phoneForm.iccid" :disabled="true"/>
        </el-form-item>
        <el-form-item :label="$t('total')+$t('flow')">
          <el-input :value="phoneForm.flowTotal" :disabled="true"/>
        </el-form-item>
        <el-form-item :label="$t('used')+$t('flow')">
          <el-input :value="phoneForm.flowUsed" :disabled="true"/>
        </el-form-item>
        <el-form-item :label="$t('surplus')+$t('flow')">
          <el-input :value="phoneForm.flowLeft" :disabled="true"/>
        </el-form-item>
        <el-form-item :label="$t('activation')+$t('time')">
          <el-input :value="phoneForm.activationTime" :disabled="true"/>
        </el-form-item>
        <el-form-item :label="$t('overTime')">
          <el-input :value="formatDate(phoneForm.overTime)" :disabled="true"/>
        </el-form-item>
        <el-form-item :label="$t('status')">
          <el-input :value="formatPhoneStatus(phoneForm.status)" :disabled="true"/>
        </el-form-item>
        <el-form-item :label="$t('current')+$t('month')+$t('used')+$t('flow')">
          <el-input :value="phoneForm.flowCurrentMonthUsed" :disabled="true"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogPhoneFormVisible = false">{{ $t('confirm') }}</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :label="$t('qrCode')"
      :visible.sync="dialogWxCoreVisible"
      width="30%"
    >
      <device-qrcode :device-core="deviceCore" style="width: 100%;height: 100%"/>
    </el-dialog>

    <el-dialog
      :label="$t('parent')+$t('device')"
      :visible.sync="dialogParentDeviceVisible"
      width="50%"
    >
      <el-table
        :data="parentDeviceList"
        style="width: 100%;"
      >
        <el-table-column :label="$t('deviceCore')">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.parentDeviceCore"
            />
          </template>
        </el-table-column>
        <el-table-column>
          <template slot="header" slot-scope="scope">
            <el-input
              v-model="parentDeviceCore"
            >
              <template slot="append">
                <el-button type="primary" icon="el-icon-plus" style="float: right" @click="addParentDevice">{{
                    $t('add')
                  }}
                </el-button>
              </template>
            </el-input>

          </template>
          <template slot-scope="scope">
            <el-button
              v-if="!scope.row.isAdd"
              type="danger"
              @click="delParentDevice(scope.row)"
            >{{ $t('delete') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog
      :label="$t('locationFence')"
      :visible="dialogMap2Visible"
      @close="closeLocationFence"
    >
      <div id="map2" style="height: 350px; width: 100%;"/>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveLocationFence">{{ $t('confirm') }}</el-button>
        <el-button type="primary" @click="clearLocationFence">{{ $t('clean') }}</el-button>
        <el-button type="primary" @click="dialogMap2Visible = false">{{ $t('cancel') }}</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :label="$t('map')"
      :visible="dialogMapVisible"
      @close="dialogMapVisible = false"
    >
      <div id="device_map" style="height: 350px; width: 100%;"/>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="btnSubmit">{{ $t('confirm') }}</el-button>
        <el-button type="primary" @click="dialogMapVisible = false">{{ $t('cancel') }}</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="dialogImportDeviceFormVisible"
    >
      <el-form>
        <el-form-item :label="$t('config')">
          <el-input
            v-model="importDeviceConfig"
            type="textarea"
            :rows="20"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogImportDeviceFormVisible = false">{{ $t('cancel') }}</el-button>
        <el-button type="primary" @click="uploadDevice">{{ $t('confirm') }}</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="showSetting"
      :title="device.deviceName"
      width="1200px"
      top="15px"
    >
      <device-setting
        :device-core="device.deviceCore"
        class="uni-scroll"
        style="height: 600px"
      />
    </el-dialog>

    <el-drawer
      size="70%"
      :visible.sync="drawer"
      direction="rtl"
    >
      <div class="uni-scroll" style="height: calc(100vh - 100px)">
        <sensor-camera-list :device="device"/>
      </div>
    </el-drawer>

  </div>
</template>

<script>
import { treeCompanyDept } from '@/api/auth/authCompanyDeptApi'
import { getWeather } from '@/api/common/commonWeatherApi'
import CameraManage from '@/components/CameraManage'
import DeviceLog from '@/components/DeviceLog'
import {
  cancelNotice,
  failureNotice,
  formatDate,
  formatDeviceStatus,
  formatLocationType,
  formatPhoneStatus,
  successNotice
} from '@/util/common'
import { listDeviceBelongGroup } from '@/api/iot/iotDeviceBelongGroupApi'
import {
  cleanWarn,
  deleteDeviceByDeviceCore,
  detailsDevice,
  downloadDevice,
  getDeviceStatus,
  getSecret,
  listDeviceIcon,
  setDeviceEnable,
  updateDevice,
  uploadDevice
} from '@/api/iot/iotDeviceApi'
import { deleteDeviceBind, insertDeviceBind, listDeviceBindParent } from '@/api/iot/iotDeviceBindApi'
import { deleteBelong, productDeviceNum } from '@/api/iot/iotDeviceBelongApi'
import { getCardInfo } from '@/api/iot/iotCardApi'
import { listDeviceServer } from '@/api/iot/iotDeviceServerApi'
import DeviceQrcode from '@/components/DeviceQrcode'
import BelongManage from '@/components/BelongManage'
import DeviceSetting from '@/components/DeviceSetting'
import SensorCameraList from '@/components/SensorCameraList'
import { getCompanyId, getDevModel, getEnableServerLinkage, getLanguage, getNetModel, getUserId } from '@/util/storage'
import { getSeriesList } from '@/api/iot/iotProductSeriesApi'
import { addMapClickListener, clearAndMakeLine, clearAndMakeMarket, makeMap, makeMarket } from '@/util/mapTool'
import { downloadStr } from '@/util/file'
import { listCodec } from '@/api/iot/iotCodecApi'

let map2 = null
let map = null
// const overlaysArray = []
export default {
  name: 'DeviceManage',
  components: {
    DeviceQrcode,
    BelongManage,
    CameraManage,
    DeviceSetting,
    SensorCameraList,
    DeviceLog
  },
  data() {
    return {
      showSetting: false,
      drawer: false,
      weather: null,
      companyId: getCompanyId(),
      showSecret: false,
      device: {
        serverId: null,
        lat: null,
        lng: null,
        deviceName: '',
        remark: '',
        protocol: '',
        iconUrl: '',
        phoneNumber: null,
        deviceKey: null,
        deviceSecret: null,
        createdDate: null,
        offLineNum: null,
        lastOffLineTimer: null,
        lastOnLineTimer: null,
        enable: null,
        lockLocal: null,
        address: null,
        hardVersion: null,
        softVersion: null,
        canDeviceLinkage: null,
        province: '',
        city: '',
        noticeStatus: 0,
        canNotice: 0,
        sendInterval: 0,
        sendOutTime: 0,
        lastSendTime: null,
        clientIp: null,
        locationFence: null,
        follow: 0,
        sendRetryNum: 0,
        groupId: null,
        productId: 0,
        seriesId: 0
      },
      productList: [],
      seriesList: [],
      iconList: [],
      serverList: [],
      markers: [],
      isIconOpen: false,
      keyword: '',
      searchPointList: [],
      form: {
        seriesName: '',
        seriesDesc: '',
        deviceName: null
      },
      // enableSearch: false,
      deviceCore: '',
      dialogWxCoreVisible: false,
      dialogMapVisible: false,
      dialogMap2Visible: false,
      dialogPhoneFormVisible: false,
      phoneForm: {},
      groupList: [],
      tempRoute: {},
      userId: parseInt(getUserId()),
      editAddress: false,
      treeDeptData: [],
      netModel: getNetModel(),
      enableServerLinkage: getEnableServerLinkage() === 'true',
      parentDeviceCore: null,
      parentDeviceList: [],
      dialogParentDeviceVisible: false,
      language: getLanguage(),
      importDeviceConfig: null,
      dialogImportDeviceFormVisible: false,
      devModel: getDevModel() === 'true',
      protocolList: [],
      locationFencePoints: []
    }
  },
  created() {
    this.init()
  },
  methods: {
    queryProtocolSearch(queryString, cb) {
      const protocolList = this.protocolList
      const results = queryString ? protocolList.filter(this.createProtocolFilter(queryString)) : protocolList
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createProtocolFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    listCodec() {
      listCodec().then(res => {
        const { code, data } = res
        const protocolList = []
        if (code === '200') {
          data.forEach(item => {
            protocolList.push({
              label: item,
              value: item
            })
          })
        }
        this.protocolList = protocolList
      })
    },
    init() {
      const param = this.$route.query
      this.deviceCore = param.deviceCore
      if (this.deviceCore == null) {
        failureNotice(this)
      }
      listDeviceIcon({}).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.iconList = data
        }
      })
      this.listCodec()
      this.listDeviceServer()
      this.productDeviceNum()
      this.getGroupList()
      this.treeCompanyDept()
      this.detailsDevice()
    },
    uploadDevice() {
      const importDeviceConfig = JSON.parse(this.importDeviceConfig)
      importDeviceConfig.deviceId = this.device.deviceId
      uploadDevice(importDeviceConfig).then(res => {
        const { code } = res
        if (code === '200') {
          successNotice(this)
          this.dialogImportDeviceFormVisible = false
          this.init()
        }
      })
    },
    jsReadFiles(e) {
      const that = this
      if (e.target.files.length) {
        const file = e.target.files[0]
        const reader = new FileReader()// new一个FileReader实例
        // if (/text+/.test(file.type)) { // 判断文件类型，是不是text类型
        reader.onloadend = function(e) {
          that.importDeviceConfig = e.target.result
          that.dialogImportDeviceFormVisible = true
        }
        reader.readAsText(file)
        // }
      }
    },
    download() {
      downloadDevice({
        deviceId: this.device.deviceId
      }).then(res => {
        const { data, code } = res
        if (code === '200') {
          downloadStr(`${this.device.deviceCore}(${this.language}).json`, JSON.stringify(data))
        }
      })
    },
    addParentDevice() {
      insertDeviceBind({
        deviceCore: this.deviceCore,
        parentDeviceCore: this.parentDeviceCore
      }).then(res => {
        this.listDeviceBindParent()
      })
    },
    delParentDevice(item) {
      deleteDeviceBind({
        bindId: item.bindId
      }).then(res => {
        this.listDeviceBindParent()
      })
    },
    listDeviceBindParent() {
      listDeviceBindParent({
        deviceCore: this.deviceCore
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.parentDeviceList = data
          this.dialogParentDeviceVisible = true
        }
      })
    },
    formatDate(date) {
      return formatDate(this, date)
    },
    formatLocationType(locationType) {
      return formatLocationType(this, locationType)
    },
    deleteBelong() {
      const that = this
      this.$confirm(this.$t('unbind') + this.device.deviceCore, this.$t('prompt'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          deleteBelong({
            deviceBelongId: that.device.deviceBelongId
          }).then(res => {
            const { code } = res
            if (code === '200') {
              successNotice(that)
            }
          })
        })
    },
    treeCompanyDept() {
      treeCompanyDept({ companyId: this.companyId }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.treeDeptData = data
        }
      })
    },
    getWeather() {
      if (this.netModel === 'local') {
        this.weather = null
        return
      }
      if (!this.device.address || this.device.address === '') {
        this.weather = null
        return
      }
      getWeather({ deviceCore: this.deviceCore }).then(res => {
        const { data } = res
        if (data) {
          this.weather = data
        } else {
          this.weather = null
        }
      })
    },
    productDeviceNum() {
      productDeviceNum({
        userId: this.userId
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.productList = data
        }
      })
    },
    getSeriesList(refresh) {
      getSeriesList({
        productId: this.device.productId
      }).then(res => {
        const { data, code } = res
        if (code === '200') {
          this.seriesList = data
          if (refresh === true) {
            this.device.seriesId = data[0].seriesId
          }
        }
      })
    },
    cameraManage() {
      this.$router.push({
        path: '/camera/device'
      })
    },
    handleSelect(key, keyPath) {
      switch (key) {
        case 'param':
          this.$router.push({
            path: '/device/param/' + this.deviceCore,
            query: {
              deviceCore: this.deviceCore,
              deviceName: this.device.deviceName
            }
          })
          break
        case 'hardwareConfig':
          this.$router.push({
            path: '/device/sensor/hardware/config/' + this.deviceCore,
            query: {
              deviceCore: this.deviceCore,
              deviceName: this.device.deviceName
            }
          })
          break
        case 'setting':
          this.$router.push({
            path: '/device/setting/' + this.deviceCore,
            query: {
              deviceCore: this.deviceCore,
              deviceName: this.device.deviceName
            }
          })
          break
        case 'explain':
          this.$router.push({
            path: '/device/explain/' + this.deviceCore,
            query: {
              deviceCore: this.deviceCore,
              deviceName: this.device.deviceName
            }
          })
          break
        case 'sensor':
          this.$router.push({
            path: '/device/sensor/' + this.deviceCore,
            query: {
              deviceCore: this.deviceCore,
              deviceName: this.device.deviceName
            }
          })
          break
        case 'status':
          this.$router.push({
            path: '/device/status/' + this.deviceCore,
            query: {
              deviceCore: this.deviceCore,
              deviceName: this.device.deviceName
            }
          })
          break
        case 'local':
          this.$router.push({
            path: '/device/local/' + this.deviceCore,
            query: {
              deviceCore: this.deviceCore,
              deviceName: this.device.deviceName
            }
          })
          break
        case 'warn':
          this.$router.push({
            path: '/device/warn/' + this.deviceCore,
            query: {
              deviceCore: this.deviceCore,
              deviceName: this.device.deviceName
            }
          })
          break
        case 'deviceLinkage':
          this.$router.push({
            path: '/device/linkage/' + this.deviceCore,
            query: { deviceCore: this.deviceCore, deviceName: this.device.deviceName }
          })
          break
        case 'settingHistory':
          this.$router.push({
            path: '/device/setting/history/' + this.deviceCore,
            query: { deviceCore: this.deviceCore, deviceName: this.device.deviceName }
          })
          break
        case 'delete':
          const numCore = Math.random()
            .toString(10)
            .substr(2, 8)
          const that = this
          this.$prompt(
            this.$t('deletePrompt') + numCore,
            this.$t('deletePrompt') + '(无法恢复，后果自负)',
            {
              confirmButtonText: this.$t('confirm'),
              cancelButtonText: this.$t('cancel')
            }
          )
            .then(function({ value }) {
              if (value !== numCore) {
                failureNotice(that, '确认码错误')
                return
              }
              deleteDeviceByDeviceCore({
                deviceCore: that.deviceCore
              }).then(res => {
                const { code } = res
                if (code === '200') {
                  successNotice(that)
                  that.$router.back()
                }
              })
            })
            .catch(function() {
              cancelNotice(that)
            })
          break
        case 'unbind':
          this.deleteBelong()
          break
        default:
      }
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    },
    formatDeviceStatus(status) {
      return formatDeviceStatus(this, status)
    },
    formatPhoneStatus(status) {
      return formatPhoneStatus(this, status)
    },
    listDeviceServer() {
      listDeviceServer(null).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.serverList = data
        } else {
          this.serverList = []
        }
      })
    },
    setTagsViewTitle() {
      this.tempRoute = Object.assign({}, this.$route)
      const route = Object.assign({}, this.tempRoute, {
        title: `${this.device.deviceName}`
      })
      this.$store.dispatch('tagsView/updateVisitedView', route)
    },
    getGroupList() {
      listDeviceBelongGroup(null).then(res => {
        const { code, data } = res
        if (code === '200') {
          const groups = []
          const item = {
            name: this.$t('no'),
            groupId: 0,
            childs: null
          }
          groups.push(item)
          for (let i = 0; i < data.length; i++) {
            const item = {
              name: data[i].name,
              groupId: data[i].groupId,
              childs: null
            }
            groups.push(item)
          }
          this.groupList = groups
        }
      })
    },
    closeLocationFence() {
      this.dialogMap2Visible = false
    },
    saveLocationFence() {
      let points = ''
      this.locationFencePoints.forEach(item => {
        points += item.lat + ' ' + item.lng + ','
      })
      this.device.locationFence = points
      this.btnSubmit()
      this.closeLocationFence()
    },
    clearLocationFence() {
      this.device.locationFence = ''
      this.btnSubmit()
      clearAndMakeMarket(map2, this.device.lat, this.device.lng)
    },
    // 清除地图上marker
    // clearOverlays() {
    //   let overlay
    //   while ((overlay = overlaysArray.pop())) {
    //     overlay.setMap(null)
    //   }
    // },
    showMap2() {
      this.dialogMap2Visible = true
      this.$nextTick(function() {
        map2 = makeMap(document.getElementById('map2'), this.device.lat, this.device.lng, 14)
        this.locationFencePoints = []
        addMapClickListener(map2, (event) => {
          this.locationFencePoints.push({
            lat: event.latLng.lat,
            lng: event.latLng.lng
          })
          if (this.locationFencePoints.length > 1) {
            clearAndMakeLine(map2, this.locationFencePoints)
          }
        })
        this.strMakeMapLine(map2, this.device.locationFence)
        makeMarket(map2, this.device.lat, this.device.lng)
      })
    },
    strMakeMapLine(map, str) {
      if (str != null && str !== '') {
        const locs = str.split(',')
        const points = []
        for (let i = 0; i < locs.length - 1; i++) {
          const latLng2 = locs[i].split(' ')
          if (latLng2.length === 2) {
            points.push({
              lat: parseFloat(latLng2[0]),
              lng: parseFloat(latLng2[1])
            })
          }
        }
        const latLng2 = locs[0].split(' ')
        if (latLng2.length === 2) {
          points.push({
            lat: parseFloat(latLng2[0]),
            lng: parseFloat(latLng2[1])
          })
        }
        return clearAndMakeLine(map, points)
      }
    },
    showPhoneInfo() {
      if (this.device.phoneNumber == null || this.device.phoneNumber === '') {
        failureNotice(this, this.$t('no') + this.$t('cardNumber'))
        return
      }
      getCardInfo({
        iccid: this.device.phoneNumber,
        deviceCore: this.deviceCore
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.phoneForm = data
          this.dialogPhoneFormVisible = true
        } else if (code === '201') {
          failureNotice(this, this.$t('no') + this.$t('cardNumber') + 2)
        }
      })
    },
    // pointClick(item) {
    //   const latlngBounds = new window.qq.maps.LatLngBounds()
    //   this.device.lat = item.latLng.lat
    //   this.device.lng = item.latLng.lng
    //   this.map.fitBounds(latlngBounds)
    //   this.enableSearch = false
    // },
    // // 设置搜索的范围和关键字等属性
    // searchKeyword() {
    //   const that = this
    //   // 根据输入的城市设置搜索范围
    //   const searchService = new window.qq.maps.SearchService({
    //     complete(results) {
    //       // 设置回调函数参数
    //       console.log(results)
    //       switch (results.type) {
    //         case 'CITY_LIST':// POI检索结果城市列表。
    //           searchService.setLocation(results.detail.cities[0].cityName)
    //           searchService.search(that.keyword)
    //           break
    //         case 'POI_LIST':// POI列表。
    //         case 'AREA_INFO'://	行政区划信息。
    //         case 'GEO_INFO':// 地理位置信息。
    //           that.searchPointList = results.detail.pois
    //       }
    //     },
    //     // 若服务请求失败，则运行以下函数
    //     error() {
    //       failureNotice(that)
    //     }
    //   })
    //   searchService.search(this.keyword)
    // },
    showMap() {
      this.dialogMapVisible = true
      this.$nextTick(function() {
        const that = this
        map = makeMap(document.getElementById('device_map'), this.device.lat, this.device.lng, 13)
        makeMarket(map, this.device.lat, this.device.lng)
        addMapClickListener(map, (e) => {
          that.device.lat = e.latLng.lat
          that.device.lng = e.latLng.lng
          clearAndMakeMarket(map, that.device.lat, that.device.lng)
          this.strMakeMapLine(map, that.device.locationFence)
        })
        this.strMakeMapLine(map, that.device.locationFence)
      })
    },
    detailsDevice() {
      detailsDevice({
        deviceCore: this.deviceCore
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.device = data
          this.setTagsViewTitle()
          this.getSeriesList()
          this.getWeather()

          this.device.createdDate = formatDate(this, this.device.createdDate)
          this.device.lastOffLineTimer = formatDate(this, this.device.lastOffLineTimer)
          this.device.lastOnLineTimer = formatDate(this, this.device.lastOnLineTimer)
          this.device.lastSendTime = formatDate(this, this.device.lastSendTime)
          this.device.pingTime = formatDate(this, this.device.pingTime)
        }
      })
    },
    choseIcon() {
      if (this.isIconOpen) {
        this.isIconOpen = false
      } else {
        this.isIconOpen = true
      }
    },
    changeIco(iconUrl) {
      this.isIconOpen = false
      this.device.iconUrl = iconUrl
    },
    renewStatus() {
      getDeviceStatus({
        deviceCore: this.deviceCore
      }).then(res => {
        const { code } = res
        if (code === '200') {
          this.detailsDevice()
        }
      })
    },
    cleanWarn() {
      cleanWarn({
        deviceCore: this.deviceCore
      }).then(res => {
        const { code } = res
        if (code === '200') {
          this.detailsDevice()
        }
      })
    },
    btnLockLoc() {
      const that = this
      this.$confirm('是否改变设备地址设置', this.$t('prompt'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          const json = {
            deviceCore: that.deviceCore,
            lockLocal: that.device.lockLocal
          }
          updateDevice(json).then(res => {
            const { code } = res
            if (code === '200') {
              successNotice(that)
            }
            that.detailsDevice()
          })
        })
        .catch(function() {
          cancelNotice(that)
        })
    },
    btnOpenPush() {
      const that = this
      this.$confirm(this.$t('change'), this.$t('prompt'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          const json = {
            deviceCore: that.deviceCore,
            openPush: that.device.openPush,
            canNotice: that.device.canNotice
          }
          updateDevice(json).then(res => {
            const { code } = res
            if (code === '200') {
              successNotice(that)
            }
            that.detailsDevice()
          })
        })
        .catch(function() {
          cancelNotice(that)
        })
    },
    btnDevicePublic() {
      const that = this
      this.$confirm(this.$t('change'), this.$t('prompt'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          const json = {
            deviceCore: that.deviceCore,
            devicePublic: that.device.devicePublic
          }
          updateDevice(json).then(res => {
            const { code } = res
            if (code === '200') {
              successNotice(that)
            }
            that.detailsDevice()
          })
        })
        .catch(function() {
          cancelNotice(that)
        })
    },
    btnCanLinkage() {
      const that = this
      this.$confirm(this.$t('change'), this.$t('prompt'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          const json = {
            deviceCore: that.deviceCore,
            canDeviceLinkage: that.device.canDeviceLinkage
          }
          updateDevice(json).then(res => {
            const { code } = res
            if (code === '200') {
              successNotice(that)
            }
            that.detailsDevice()
          })
        })
        .catch(function() {
          cancelNotice(that)
        })
    },
    btnNoticeStatus() {
      const that = this
      this.$confirm(this.$t('change'), this.$t('prompt'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          const json = {
            deviceCore: that.deviceCore,
            noticeStatus: that.device.noticeStatus
          }
          updateDevice(json).then(res => {
            const { code } = res
            if (code === '200') {
              successNotice(that)
            }
            that.detailsDevice()
          })
        })
        .catch(function() {
          cancelNotice(that)
        })
    },
    btnFollow() {
      const that = this
      this.$confirm(this.$t('change'), this.$t('prompt'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          const json = {
            deviceCore: that.deviceCore,
            follow: that.device.follow
          }
          updateDevice(json).then(res => {
            const { code } = res
            if (code === '200') {
              successNotice(that)
            }
            that.detailsDevice()
          })
        })
        .catch(function() {
          cancelNotice(that)
        })
    },
    btnWecharCode() {
      this.dialogWxCoreVisible = true
    },
    getDeviceSecret() {
      getSecret({
        deviceCore: this.deviceCore
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.device.deviceKey = data.deviceKey
          this.device.deviceSecret = data.deviceSecret
          this.device.createdUserId = data.createdUserId
          this.showSecret = true
        }
      })
    },
    btnSubmit() {
      updateDevice({
        deviceCore: this.deviceCore,
        deviceName: this.device.deviceName,
        phoneNumber: this.device.phoneNumber,
        remark: this.device.remark,
        protocol: this.device.protocol,
        lat: this.device.lat,
        lng: this.device.lng,
        iconUrl: this.device.iconUrl,
        productId: this.device.productId,
        seriesId: this.device.seriesId,
        sendInterval: this.device.sendInterval,
        sendOutTime: this.device.sendOutTime,
        sendRetryNum: this.device.sendRetryNum,
        locationFence: this.device.locationFence,
        canDeviceLinkage: this.device.canDeviceLinkage,
        canNotice: this.device.canNotice,
        noticeStatus: this.device.noticeStatus,
        follow: this.device.follow,
        groupId: this.device.groupId,
        address: this.device.address,
        deptId: this.device.deptId
      }).then(res => {
        const { code } = res
        this.editAddress = false
        if (code === '200') {
          successNotice(this)
        }
        this.detailsDevice()
      })
    },
    btnThing() {
      const that = this
      this.$confirm(this.$t('change'), this.$t('prompt'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          const json = {
            deviceCore: that.deviceCore,
            enable: that.device.enable
          }
          setDeviceEnable(json).then(res => {
            const { code } = res
            if (code === '200') {
              successNotice(that)
            }
            that.detailsDevice()
          })
        })
        .catch(function() {
          cancelNotice(that)
        })
    }
  }
}
</script>
<style lang="scss" scoped>

@import '@/styles/element-variables.scss';

.primary-color {
  color: $--color-primary;
}

.bg-primary-color {
  background-color: $--color-primary;
}

//
//#device_map {
//  width: 100%;
//  height: 100%;
//  overflow: hidden;
//  margin: 0;
//  font-family: "微软雅黑";
//}
//
//.map_search {
//  position: absolute;
//  top: 13px;
//  left: 13px;
//  width: 40px;
//  height: 40px;
//  border-radius: 50%;
//  background-color: rgba(225, 225, 225, 0.8);
//  z-index: 10;
//  box-shadow: 0 0 13px rgba(225, 225, 225, 0.6);
//  cursor: pointer;
//}
//
//.map_search_span {
//  position: absolute;
//  top: 10px;
//  left: 10px;
//  font-size: 1.5em;
//}
//
//.map_search_index {
//  position: absolute;
//  top: 13px;
//  left: 13px;
//  width: 340px;
//  height: auto;
//  overflow: hidden;
//  z-index: 10;
//}
//
//.map_search_frame {
//  position: relative;
//  width: 340px;
//  height: 45px;
//  line-height: 45px;
//  background-color: rgba(225, 225, 225, 0.8);
//  box-shadow: 0 0 13px rgba(225, 225, 225, 0.6);
//}
//
//.map_search_frame_input {
//  position: absolute;
//  top: 7px;
//  left: 13px;
//  width: 270px;
//  height: 30px;
//  line-height: 30px;
//  border: none;
//  border-radius: 4px;
//  padding: 0 20px;
//}
//
//.map_search_frame_btn {
//  position: absolute;
//  top: 9px;
//  right: 12px;
//  width: 30px;
//  height: 26px;
//  font-size: 1.6em;
//}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #b3d3c2;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;

}

</style>
